import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import { Layout, Menu, Progress, Avatar, Badge, Drawer, Button, Card, Row, Col, } from 'antd';

import './frame.less';
import logo from '../../assets/images/logo.png'

import MyDropDown from '../../components/dropdown/dropdown'

import { diskRoutes } from '../../routes/router'
import IconFont from '../../components/icon/icon'
import { getLocalStorage } from '../../utils/utils'
import { ServerURL } from '../../utils/config'
import { getAllFileData } from '../../utils/common'

const { SubMenu } = Menu;

const { Header, Content, Sider } = Layout;

let routes = diskRoutes.filter(route => route.isShow)
class Frame extends Component {
    state = {
        visible: false,
        userInfo: {}
    };
    componentDidMount = async () => {
        let userInfo = JSON.parse(getLocalStorage('userInfo'))
        this.setState({ userInfo })
        let allFileData = JSON.parse(getLocalStorage('allFileData')) //取本地缓存中的所有文件数据
        if (allFileData && allFileData.data.length > 0) {
            if ((Date.now() - parseInt(allFileData.time)) > 1600000) {
                getAllFileData(userInfo.account)
            }
        } else {
            getAllFileData(userInfo.account)
        }
    }
    //展示选择皮肤模块框
    showDrawer = () => {
        this.setState({
            visible: true,
        });
    };
    //选择皮肤弹出框关闭
    onClose = () => {
        this.setState({
            visible: false,
        });
    };
    //点击选择皮肤弹出框开启
    onChange = e => {
        this.setState({
            placement: e.target.value,
        });
    };
    render() {
        const { userInfo, visible } = this.state
        return (
            <Layout>
                <Header className="header">
                    <div className="left-box">
                        <img src={logo} className="logo" alt="logo" />
                        <Menu className="Menu" theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
                            <Menu.Item key="1">网盘</Menu.Item>
                            <Menu.Item key="2">动态</Menu.Item>
                            <Menu.Item key="3">分享</Menu.Item>
                            <Menu.Item key="4">作者博客</Menu.Item>
                            <Menu.Item key="5">赞助支持</Menu.Item>
                        </Menu>
                    </div>
                    <div className="right-box">
                        <Avatar size="large" src={ServerURL + userInfo.avatarurl} />
                        <MyDropDown nickname={userInfo.nickname ? userInfo.nickname : userInfo.account} />
                        <Menu className="Menu" theme="dark" mode="horizontal">
                            <Menu.Item key="1">客户端下载</Menu.Item>
                            <Menu.Item key="2"><IconFont type="iconMessage" className="nav-icon" /></Menu.Item>
                            <Menu.Item key="3"><IconFont type="iconFeedback" className="nav-icon" /></Menu.Item>
                            <Menu.Item key="4" onClick={this.showDrawer} ><Badge status="error" offset={[-12, 20]}><IconFont type="iconSkin" className="nav-icon" /></Badge></Menu.Item>
                        </Menu>
                    </div>
                </Header>
                <Layout className='fade'>
                    <Sider width={200} className="site-layout-background">
                        <Menu
                            mode="inline"
                            defaultSelectedKeys={[this.props.location.pathname]}
                            defaultOpenKeys={['/disk/classify']}
                            style={{ height: '88%', borderRight: 0 }}>
                            {
                                routes.map(route => {
                                    return route.children.length === 0 ? (<Menu.Item key={route.path} onClick={p => this.props.history.push(p.key)} ><IconFont type={route.icon} />{route.title}</Menu.Item>) :
                                        (<SubMenu key={route.path} icon={<IconFont type={route.icon} />} title={route.title}>
                                            {route.children.map(v => {
                                                return (<Menu.Item key={v.path} onClick={o => this.props.history.push(o.key)}><IconFont type={v.icon} />{v.title}</Menu.Item>)
                                            })}
                                        </SubMenu>)
                                })
                            }
                        </Menu>
                        <div className="bottomBox">
                            <Progress trailColor="#ccc" showInfo={false} percent={userInfo.usedisk / userInfo.spacesize * 100} status="active" />
                            <div className="info">
                                <span >{userInfo.usedisk}M/{userInfo.spacesize / 1024}G</span>
                                <a href='/#'>扩容</a>
                            </div>
                        </div>
                    </Sider>
                    <Layout style={{ padding: '10px' }}>
                        <Content
                            className="site-layout-background"
                            style={{
                                padding: 24,
                                margin: 0,
                                minHeight: 280,
                            }}>
                            {this.props.children}
                        </Content>
                    </Layout>
                </Layout>
                <Drawer
                    title="选择皮肤"
                    placement="bottom"
                    closable={true}
                    headerStyle={{ textAlign: "center" }}
                    footerStyle={{ textAlign: "center" }}
                    height={400}
                    bodyStyle={{ textAlign: "center", overflow: "hidden" }}
                    onClose={this.onClose}
                    visible={visible} footer={
                        <div
                            style={{
                                textAlign: 'center',
                            }}>
                            <Button
                                onClick={this.onClose}
                                style={{ marginRight: 8 }} type="primary">
                                确定
                          </Button>
                            <Button onClick={this.onClose} >
                                取消
                          </Button>
                        </div>
                    }>
                    <div className="cardBox">
                        <Row gutter={16}>
                            <Col span={8}>
                                <Card >
                                    Card content
                            </Card>
                            </Col>
                            <Col span={8}>
                                <Card >
                                    Card content
                                </Card>
                            </Col>
                        </Row>
                    </div>

                </Drawer>
            </Layout>
        )
    }

}

export default withRouter(Frame)
